<template>
  <div  style="
    height: 650px; width: 600px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);" >
    <div style="width: 70%; height:80px;margin: 0 auto" class="show-time" >
      <span style="font-family: 'Britannic Bold', serif;font-size: 18px; " > 大衍噬法推演系统 </span>
    </div>

    <div class="show-time" >
      大衍噬法 : 操作前请静心:
      <el-button type="primary" @click="toReq" >开始测算</el-button>
    </div>



    <div class="ans_gua " style="margin: 0 auto" >

      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>卦象解析</span>
        </div>
        <div style="height: 200px" >
          <el-popover
              placement="bottom"
              :title="indexList[currentGua]"
              width="180"
              trigger="hover"
              :content="guaExplain[currentGua]"
              v-model="visible">

          </el-popover>
          <el-row :gutter="1">
            <el-col :span="6">
              <el-card>
                <div class="cloumFlex" @mouseover="getTip(0)" >
                  {{ `${divineRes['baseName']}(本卦)`  }}
                  <div class="cloumFlex">
                    <yao v-for="(e,index) in divineRes['base']" :key="index" :type="e" ></yao>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-card>
              <el-col :span="24">

                <div v-html="divineRes['baseExplain']" >  </div>
              </el-col>
            </el-card>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="6">
              <el-card>
                <div class="cloumFlex" @mouseover="getTip(1)" >
                  {{`${divineRes['changeName'] }(变卦)`}}
                  <div class="cloumFlex">
                    <yao v-for="(e,index) in divineRes['change']" :key="index" :type="e" ></yao>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-card>
              <el-col :span="24">

                <div v-html="divineRes['changeExplain']" >  </div>
              </el-col>
            </el-card>
          </el-row>
        </div>

      </el-card>

    </div>

  </div>
</template>

<script>
import Yao from "@/components/yao.vue";

import {post,get} from "@/utils/http";



export default {
  name: "Evolution",
  components: {Yao},
  data(){
    return{
      visible:false,
      currentGua:'',
      guaExplain:['本卦是起卦时最初得到的卦象，' +
      '它反映了事物的初始状态、当前情况或是求测问题的本质。' +
      '在占卜中，本卦是分析的基础，代表了问题的出发点或现状。',
        '互卦是从本卦的内部结构衍生出来的卦象，通过本卦的二、三、四爻组成上卦，' +
        '三、四、五爻组成下卦来获得。互卦揭示了问题发展过程中的中间环节、' +
        '隐藏的因素或是事件发展的内在动力。','变卦是在本卦的基础上，根据动爻（即在起卦过程中指定为变化的爻）' +
        '的变化而形成的新的卦象。如果本卦中有某个爻被确定为动爻，则该爻阴阳性质改变，由此生成的新卦便是变卦。'],
      indexList:['本卦','变卦','互卦'],
      ans: '',
      guaName: '',
      sign:false,
      explain:"",
      divineRes:{base:'',baseExplain:'',baseName:'', change:'',changeExplain:'',changeName:''
      }
    }
  },
  methods:{
    /**
     *  获取结果
     */

    getTip(e){
      console.log(e)
      this.visible = !this.visible
      this.currentGua = e
      console.log('visible')
    },

    toReq(){
        if (this.sign !== false) {
          console.log("sign:"+ this.sign)
          this.$message({
            type: 'success',
            message: '该操作必须等待1分钟，才能再次操作'
          })
          setTimeout(() => {
            this.sign = false
          }, 60000)
        } else {
          this.sign = true
          get('/deduction',{
          }).then(e=>{
            // console.log( e['data'] )
            //  卦象 从 后往前 遍历 渲染 每一个 卦象
            this.divineRes = e['data']
            console.log(e)
          })
      }
    }
  }
}
</script>

<style scoped >
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  font-size: 14px;
  font-family: "Britannic Bold", serif;
  width: 450px;
  height: 480px;
}
.show-time{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.ans_gua{
  width: 80%;
  height: 180px;
}

.img_gua{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 50px;
  height: 70px;
  margin: 5px;
}
.clearfix{

}
.showTime{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100px;

}
.cloumFlex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 120px;

}
</style>